今天要介紹的是 Sass 裡面重要的功能 mixin 與 extend，撰寫 CSS 時常常會有許多重複的樣式，這在寫程式的角度來說當然不好，但是 CSS 缺少了邏輯，沒辦法將重複的部分提出來另外維護，不過換成 Sass 就可以解決這樣的問題了。

Mixin

mixin 的使用時機在於有大量的元素都有相同樣式時，例如按鈕元件，我們可以先將一些 CSS 屬性先寫好，利用 mixin 將變數帶入值。

// SCSS
@mixin button($radius, $color) {
  border-radius: $radius;
  color: $color;
}
.btn-a {
  @include button(4px, #000);
}
// CSS
.btn-a {
  border-radius: 4px;
  color: #000;
}

另外還有處理 CSS3 樣式的前綴也是 mixin 擅長的部分，因為 CSS3 的許多屬性都要依照不同的瀏覽器撰寫不同的程式碼，明明只要寫一個功能，卻要使用四倍的程式碼來處理。這時候就可以撰寫成 mixin，使用時就可以只用一行程式碼加快開發效率。

// SCSS
@mixin transition($val) {
  -webkit-transition: $val;
  -moz-transition: $val;
  transition: $val;
}
.btn-a {
  @include transition(color 0.3s ease-in, background 0.5s ease-out);
}
// CSS
.btn-a {
  -webkit-transition: color 0.3s ease-in, background 0.5s ease-out;
  -moz-transition: color 0.3s ease-in, background 0.5s ease-out;
  transition: color 0.3s ease-in, background 0.5s ease-out;
}

Extend

extend 使用時機在於需要使用群組選擇 A, B 時，是一種繼承的概念，讓撰寫樣式更像在寫程式，也會更方便維護。

// SCSS
.btn-a {
  background: #777;
  border: 1px solid #ccc;
  font-size: 1em;
  text-transform: uppercase;
}
.btn-b {
  @extend .btn-a;
  background: #ff0;
}
// CSS
.btn-a,.btn-b {
  background: #777;
  border: 1px solid #ccc;
  font-size: 1em;
  text-transform: uppercase;
}
.btn-b {
  background: #ff0;
}

去年的 IT 鐵人賽就有一系列 Sass 的文章，想仔細了解 Sass 的人可以一篇篇去了解。

• IT 鐵人幫 - 30天掌握Sass語法